import React, { useRef } from 'react';
import GlobalStyle from '../../global-styles';
import { Switch, Route } from 'react-router-dom';
import { LocomotiveScrollProvider } from 'react-locomotive-scroll';
import RainbowHeader from '../../components/RainbowHeader';
import Home from '../Home/Loadable';
import Blog from '../Blog/Loadable';
import Editor from '../Editor/Loadable';
import Ideas from '../Ideas/Loadable';
import SelfCenter from '../SelfCenter/Loadable';

export default function App() {
  const containerRef = useRef(null);
  return (
    <LocomotiveScrollProvider
      options={{
        smooth: true,
      }}
      containerRef={containerRef}
      watch={[]}
    >
      <div data-scroll-container ref={containerRef}>
        <RainbowHeader />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/editor" component={Editor} />
          <Route exact path="/blog" component={Blog} />
          <Route exact path="/ideas" component={Ideas} />
          <Route exact path="/selfCenter" component={SelfCenter} />
        </Switch>
        <GlobalStyle />
      </div>
    </LocomotiveScrollProvider>
  );
}
